<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    custom-class="dialog-my"
  >
    <el-form
      :model="form"
      ref="myform"
      :rules="rules"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="项目名称" prop="name">
        <el-input
          v-model="form.name"
          autocomplete="off"
          style="width: 244px"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目图片" prop="picUrl">
        <el-upload
          :action="url"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="upSuccess"
          :headers="{ token: token }"
          :file-list="imageList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-input v-model="form.picUrl" style="display: none"></el-input>
      </el-form-item>
      <el-form-item label="营业状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择活动区域">
          <el-option label="开启" value="1"></el-option>
          <el-option label="关闭" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="同行人数" prop="personCount">
        <el-input
          v-model="form.personCount"
          style="width: 244px"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input
          v-model="form.sort"
          style="width: 244px"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { uploadFile } from "@/config/interface";
import { itemSave } from "@/config/api";

export default {
  data () {

    return {
      dialogFormVisible: false,
      title: '',
      url: "",
      token: "",
      imageList: [],
      form: {
        name: undefined,
        picUrl: "",
        personCount: "",
        status: "",
        sort: ""
      },
      rules: {
        name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择营业状态', trigger: 'change' }],
        personCount: [
          { required: true, message: '请输入同行人数', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'change' }
        ],
        picUrl: [
          { required: true, message: '请上传项目图片', trigger: 'change' }
        ]

      }
    }
  },
  methods: {
    addShow () {
      this.url = uploadFile()
      this.token = this.$store.state.login.token;
      this.title = '新增项目'
      this.resetFields()
      this.dialogFormVisible = true
    },
    editShow (record) {
      this.title = '编辑项目'
      this.url = uploadFile()
      this.token = this.$store.state.login.token;
      this.resetFields()
      this.form = {
        id: record.id,
        name: record.name,
        picUrl: record.picUrl,
        personCount: record.personCount,
        status: record.status,
        sort: record.sort
      }
      let list = record.picUrl.split(',')
      this.imageList = []
      list.map(item => {
        this.imageList.push({ url: item })
      })

      this.dialogFormVisible = true
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
      let arr = []
      fileList.map(item => {
        arr.push(item.url)
      })
      this.form.picUrl = arr.toString()
    },
    upSuccess (file) {
      this.imageList.push({ url: file.result })
      let arr = []
      this.imageList.map(item => {
        arr.push(item.url)
      })
      this.form.picUrl = arr.toString()
    },
    resetFields () {
      this.form = {
        name: undefined,
        picUrl: "",
        personCount: "",
        status: "",
        sort: ""
      }
      this.imageList = []
    },
    submit () {
      this.$refs['myform'].validate((valid) => {
        if (valid) {

          itemSave(this.form).then(res => {
            this.dialogFormVisible = false
            this.$parent.getData()
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    }
  }
}
</script>
<style>
</style>